<template>
  <Layout class="home" v-loading="loading" :footer="false">  
    <!-- banner start -->
    <div class="banner_container" >
      <swiper class="banner" ref="swiperBanner" :style="swiperH" :options="swiperBanner" 
       v-if="banner && banner.length" @reachEnd='reachEnd'  
       @slideChangeTransitionEnd="slideChangeTransitionEnd"
       @slideChangeTransitionStart="slideChangeTransitionStart"> 
        <swiper-slide v-for="item in bannerFirstList" :key="item.img"  >
          <bannerItem :dataItem="item" />
        </swiper-slide>
        <swiper-slide>
          <swiper ref="swiperFooter" :style="swiperH"  :options="swiperFooter" class="swiperF" v-if="bannerLast" @reachBeginning='reachBeginning'>
            <swiper-slide> 
              <bannerItem :dataItem="bannerLast" />
            </swiper-slide>
            <swiper-slide> 
              <FooterItem @open="handleOpen" @close="handleClose"></FooterItem>
            </swiper-slide>
            <swiper-slide v-if="sssss"></swiper-slide>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
          </swiper>
          
        </swiper-slide>
      </swiper>
      <div class="slide_tips" v-show="tipsShow"> 
        <i class="s_line"></i>
        <span class="txt">滑动</span>
      </div>
    </div>
  </Layout>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import bannerItem from './bannerItem.vue'
import FooterItem from '../layout/components/FooterBar.vue'
import Layout from '../layout/index.vue'
import { bannerList } from  '@/api/index/index'
import { mapGetters } from 'vuex'
// let vm = null
export default {
  components: { Swiper, SwiperSlide, bannerItem, FooterItem , Layout},
  data() {
    return {
      sssss: false,
      banner:[ ],
      products:[],
      activeIndex: 0,
      swiperBanner: {
        autoplay: false,
        loop: false,//是否循环
        slidesPerView: 1,//一排显示几个
        spaceBetween: 0, //间隔'
        direction: 'vertical',
        speed: 1000,
        mousewheel: {
          releaseOnEdges: true,
          eventsTarged: '.banner_container',
        },
      },    
      bannerH: null,
      loading:false,
      swiperShow: false,

      isModuleSwiperRun: true,
      swiperFooter: {
        direction: 'vertical',
        // roundLengths : true,
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        mousewheel: true,
        autoHeight: true, //高度随内容变化
      },
      tipsShow: true,
      swiperH: 'height: 100vh;'
    }
  },

  created () {
    // vm = this
    if(this.curSite){
      this.getBannerList()

    }
  },
  watch: { 
    logoClick () {
      if(this.curSite){
        this.getBannerList()
      }
    },
    siteIcon (){
      if(this.curSite){
        this.getBannerList()
      }
    },
  },
  computed: {
    swiper() {
      return this.$refs.swiperBanner.$swiper
    },
    ...mapGetters(['curSite', 'siteIcon', 'logoClick', 'menuArray', 'isPhone']),
    bannerLast(){
      let list = JSON.parse(JSON.stringify(this.banner))
      return list[list.length - 1]
    },
    bannerFirstList(){
      let list = JSON.parse(JSON.stringify(this.banner))
      return  list.splice(0, (list.length-1))
    }
  },
  mounted(){
    this.swiperH ='height:' + (document.documentElement.clientHeight  || document.body.clientHeight )+ 'px'

  },

  methods: {
    getBannerList () { // banner
      this.loading= true
      let params = {
        site_id: this.curSite.id
      }
      bannerList(params).then(res=>{
        if(res.state == 1){
          let list = res.data.rows
          this.banner = list
        }
        this.loading = false
      })
    },
    reachEnd() {
      this.tipsShow = false
      this.swiper.mousewheel.disable()
    },

    reachBeginning() {
      this.tipsShow = true
      this.swiper.mousewheel.enable()
    },

    handleOpen() {
      this.sssss = true
      setTimeout(() => {
        this.sssss = false
      }, 800)
      
    },
    handleClose (){
      this.sssss = true
      setTimeout(() => {
        this.sssss = false
      }, 400)
    },
 

  }
}
</script>

<style lang="scss">
@import '@/styles/common/variables.scss';
@keyframes a_banner_s_line {
	0%{ transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
	20%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
	30%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 0;}
	31%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0; opacity: 0;}
	50%{  transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0; opacity: 1;}
	100%{  transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
 }

 .home{
  .banner_container{
    position: relative;
    .swiper-container.banner{
      // background-color: #ffffff;
      // height: 937px;
      height: 100vh;
      text-align: center;
      .video-player{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper-slide{
        .bannerItem{
          height: 100vh;
          width: 100%;
        }
        .el-image{
          width: 100%;
          height: 100%;
          cursor: pointer;
          .el-image__inner{
            object-fit: cover;
          }
        }  
        .title_con  {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .title{
            position: relative;
            top: 100px;
            left: 200px;
            color: #ffffff;
            width: 100%;
            text-align: left;
            word-break: break-word;
            line-height: 1;
          }
          .subTitle{
            position: relative;
            top: 200px;
            left: 200px;
            width: 100%;
            color: #ffffff;
            text-align: left;
            word-break: break-word;
            line-height: 1;
            .more{
              position: absolute;
              margin-top: 40px;
            }
          }
        }
    
      }
  
      
      
  
    }
    
    .swiperFooter{
      width: 100%;
      height: 100%;
    }
    
    

  }
  .slide_tips{
    display: block;
    width: 30px;
    height: 57px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: 32px;
    z-index: 2;
    .s_line{
      display: block;
      width: 2px;
      height: 32px;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      margin-left: -1px;
      top: 0px;
      background: #191919;
      animation: a_banner_s_line 3s  linear both infinite;
      -webkit-animation: a_banner_s_line 3s  linear both infinite;
      -ms-animation: a_banner_s_line 3s  linear both infinite;
      -moz-animation: a_banner_s_line 3s  linear both infinite;
      -o-animation: a_banner_s_line 3s  linear both infinite;
    }
    .txt{
      display: block;
      width: 100%;
      position: absolute;
      left: 0;
      text-align: center;
      bottom: 0px;
      font-size: 12px;
      letter-spacing: 2px;
      color: #191919;
    }
  }
  .swiperF {
    height: 100vh;
    .swiper-slide{
      height: auto;
    }
  }
  .footer_div_block{
    opacity: 0;
  }
  .footer_div{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

  }

 }



 .bgc_black{ //黑色背景
   .slide_tips{
     .txt{
       color: #ffffff;
     }
     .s_line{
       background-color: #ffffff;
     }
   }
 }


.home {
  @include respond('768'){
    .slide_tips{
      bottom: 16px;
    }
    
    .banner_container{
      .swiper-container.banner {
        height: 100%;
        .swiper-slide {
          .title_con{
            .subTitle, 
            .title{
              text-align: center;
            }
          }

        }
      }
     
    } 
  }
}

</style>